<template>
  <div class="controller" style="transform: scale(1.1);">
    <div ref="containerRef">
      <ContextMenu
        class="block"

        :menuItems="[
          { label: '添加' },
          { label: '编辑' },
          { label: '删除'},
          { label: '复制' },
          { label: '查看' }      
        ]"
        :location="{
          x, 
          y, 
          visible
        }"
        @select="choose1=$event.label"
        >
        <h2>{{choose1}} {{visible.value}}</h2>
      </ContextMenu>
    </div>
    <!-- <div ref="containerRef2">
      <ContextMenu
        class="block"
        :menuItems="[
          { label: '员工' },
          { label: '部门' },
          { label: '角色'},
          { label: '权限' },
          { label: '菜单' }      
        ]"
        @select="choose2=$event.label"
        >
        <h2>{{choose2}}</h2>
        <div ref="containerRef3">
        <ContextMenu
          class="block"
          :menuItems="[
            { label: '菜单1' },
            { label: '菜单2' },
            { label: '菜单3'},
            { label: '菜单4' },
            { label: '菜单5' }      
          ]"
          @select="choose3=$event.label"
          >
          <h3>{{choose3}}</h3>    
        </ContextMenu>
        </div>
      </ContextMenu>
    </div> -->
  </div>
</template>

<script setup>
import { ref } from 'vue'
import ContextMenu from '@/components/ContextMenu.vue'
import { useContextMenu } from '@/hooks/useContextMenu'
const choose1 = ref('右键菜单1');
// const choose2 = ref('右键菜单2');
// const choose3 = ref('右键菜单3');
const containerRef = ref(null);
const data = useContextMenu(containerRef);
const x = ref(0);
const y = ref(0);
const visible = ref(false);
x.value = data.x;
y.value = data.y;
visible.value = data.visible;

// const choose2 = ref('右键菜单2');
// const choose3 = ref('右键菜单3');
// const containerRef2 = ref(null);
// const containerRef3 = ref(null);
// const {x,y,visible
// console.log(x,y,visible)

//   showMenu.value = false;
// const containerRef2 = ref(null);
// const containerRef3 = ref(null);
// const {x,y,visible
// console.log(x,y,visible)

//   showMenu.value = false;
//   emit('select',item)
// }
</script>

<style scoped>
.controller {
  width: 100%;
  margin: 1em auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-direction:row;
}
.block {
  margin: 1em auto;
  width: 400px;
  height: 300px;
  border: 1px solid #ccc;
}

</style>